<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            font-family: Helvetica, serif;
        }

        svg {
            width: 500px;
            height: 500px;
        }

        .top-label {
            font-size: 13px;
            font-style: italic;
            text-transform: uppercase;
            float: left;
        }

        .age-label {
            text-align: right;
            font-weight: bold;
            width: 90px;
            padding-right: 10px;
        }

        .clearfix {
            clear: both;
        }

        .bar {
            fill: darkslateblue;
        }

        .x.axis line {
            fill: none;
            stroke: #000;
        }

        .axis path {
            display: none;
        }

        .x.axis text {
            font-size: 13px;
        }

        .y.axis line {
            display: none;
        }

        .buttons-container {
            width: 520px;
            margin-bottom: 15px;
        }

        .button {
            float: left;
            margin-left: 10px;
            font-weight: lighter;
            cursor: pointer;
        }

        .selected {
            font-weight: bold;
        }

        .play-button {
            margin-left: 10px;
            margin-bottom: 15px;
            font-style: italic;
            cursor: pointer;
            color: gray;
        }

        .play-button:hover {
            color: black;
        }
    </style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>

<script>
    var year = 2010;
    var buttonYears = [1950, 1955, 1960, 1965, 1970, 1975, 1980,
        1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020, 2025, 2030, 2035, 2040, 2045, 2050];
    var playInterval;
    var margin = {top: 30, right: 0, bottom: 0, left: 100},
        width = 500 - margin.left - margin.right,
        height = 450 - margin.top - margin.bottom;

    var x = d3.scale.linear()
        .range([0, width]);

    var y = d3.scale.ordinal()
        .rangeBands([0, height], 0.2, 0);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("top")
        .ticks(5, "%");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    function keys(d) {
        return d.age;
    }

    const body = d3.select("body");
    body.append("h2")
        .text(`Age distribution of the world, ${year}`);

    var playAll = body.append("div")
        .attr("class", "play-button")
        .text("▶ PLAY ALL YEARS");

    var buttons = body.append("div")
        .attr("class", "buttons-container")
        .selectAll("div").data(buttonYears)
        .enter().append("div").text(function (d) {
            return d;
        })
        .attr("class", function (d) {
            if (d == year) {
                return "button selected";
            } else {
                return "button"
            }
        });


    body.append("div")
        .attr("class", "clearfix");

    body.append("div")
        .attr("class", "top-label age-label")
        .append("p")
        .text("age group");

    body.append("div")
        .attr("class", "top-label")
        .append("p")
        .text("portion of the population");

    body.append("div")
        .attr("class", "clearfix");


    var svg = body.append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


    d3.csv("allData.csv", function (error, data) {
        var popData = data.filter(function (element) {
            return element.year == year;
        });

        x.domain([0, d3.max(data, function (element) {
            return element.value;
        })]);

        y.domain(popData.map(function (element) {
            return element.age;
        }));

        var bars = svg.selectAll("rect")
            .data(popData, keys)
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", 0)
            .attr("height", y.rangeBand())
            .attr("width", function (d) {
                return x(d.value);
            })
            .attr("y", function (d) {
                return y(d.age);
            });

        svg.append("g")
            .call(xAxis)
            .attr("class", "x axis");
        svg.append("g")
            .call(yAxis)
            .attr("class", "y axis");

        buttons.on("click", function (d) {
            update(d);
            clearInterval(playInterval)
        });

        function update(updateYear) {
            d3.select(".selected")
                .classed("selected", false);
            buttons.filter(function (d) {
                return d == updateYear;
            })
                .classed("selected", true);

            popData = data.filter(function (element) {
                return element.year == updateYear;
            });

            bars.data(popData, keys)
                .transition()
                .duration(500)
                .ease("linear")
                .attr("width", function (d) {
                    return x(d.value);
                });
        }

        playAll.on("click", function () {
            var i = 0;
                playInterval=setInterval(function () {
                update(buttonYears[i]);
                i++;
                if (i > buttonYears.length - 1) {
                    clearInterval(playInterval);
                }
            }, 700)
        });
    });
</script>
</body>
</html>